<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{ padding: 0; margin: 0; list-style-type: none;}
    .cont{ width: 1200px; height: auto; margin: 0 auto; overflow: hidden; display: grid; grid-template-columns: repeat(2,1fr); gap:10px;}
    .cont .ct{ background-color: red; width: 100%; height: 400px; transition: all 1s ease;  transition-delay: 0.5s;}
    .hide{animation:yundong var(--i)s;  transition-delay: var(--i)s; animation-delay: var(--i)s;}
    @keyframes yundong {
        from{
            transform: translateY(20px);
            opacity: .5;
        }
        to{
            transform: translateY(0);
            opacity: 1;
        }
    }
</style>
<body>
    
    <div class="cont">
         <div class="ct" style="--i:1;">1</div>
         <div class="ct" style="--i:2;">1</div>
         <div class="ct" style="--i:3;">1</div>
         <div class="ct" style="--i:4;">1</div>
         <div class="ct" style="--i:5;">1</div>
         <div class="ct" style="--i:6;">1</div>
         <div class="ct" style="--i:7;">1</div>
         <div class="ct" style="--i:8;">1</div>
         <div class="ct" style="--i:9;">1</div>
         <div class="ct" style="--i:10;">1</div>
         <div class="ct" style="--i:11;">1</div>
         <div class="ct" style="--i:12;">1</div>
         <div class="ct" style="--i:13;">1</div>
         <div class="ct" style="--i:14;">1</div>
         <div class="ct" style="--i:15;">1</div>
         <div class="ct" style="--i:16;">1</div>
         <div class="ct" style="--i:17;">1</div>
         <div class="ct" style="--i:18;">1</div>
         <div class="ct" style="--i:19;">1</div>
         <div class="ct" style="--i:20;">1</div>
    </div>
    <script>
        let cont = document.querySelector('.cont');
        let cts = document.querySelectorAll('.ct');
        document.addEventListener('scroll', function(){
        for(let i = 0; i < cts.length; i++){
            //判断是否在视口内
            let shikou = cts[i].getBoundingClientRect();
            let left = shikou.left;
            let top = shikou.top;
            let right = shikou.right;
            let bottom = shikou.bottom;
            if(left < 0 || right > window.innerWidth || top < 0 || bottom > window.innerHeight){
                cts[i].style.background = '#333';
                cts[i].classList.remove('hide');
            }else{
                cts[i].style.background = 'red';
                
                cts[i].classList.add('hide');
            }
        }
        })
    </script>
</body>
</html>